<template>
	<view class="datail-box">

		<!-- 商品图 -->
		<view class="goods-pic">
			<image :src="dishSet.imgUrl" style="width: 100%;" mode="heightFix"></image>
		</view>
		<uni-notice-bar show-icon scrollable style="width: 100%; height: 40upx;"
			text="温馨提醒:亲爱的顾客，感谢您选择我们的套餐菜品。请注意，我们的套餐设计是精心搭配的，以确保您能够品尝到丰富多样的美味。因此，我们的套餐系菜品暂时不支持换菜和挑菜。希望您能理解并喜欢我们为您精心准备的每一道菜。如有任何其他问题或需求，请随时告知我们的服务团队，我们将竭诚为您服务。祝您用餐愉快！" />
		<!-- 商品基本信息 -->
		<view class="info">
			<!-- 菜品信息样式 -->
			<uni-row class="demo-uni-row">
				<view class="price">每1份 ¥<text style="font-size: 30upx;">{{dishSet.salePrice}}</text>
					<text class="totalPrice">¥{{dishSet.totalPrice}}</text>
				</view>
				<view class="name">{{dishSet.categoryName}}</view>
				<view class="sales">
					<view>销 量：{{dishSet.salesQuantity}} ++ </view>
				</view>
			</uni-row>
			<!-- 预定酒席 -->
			<uni-row class="demo-uni-row">
				<uni-col :span="18">
					<view class="booking_box"><text class="booking_titele">预定酒席：</text>
						<text class="booking_content" v-if="customer.tableCount !=undefined">您的预订酒席桌数为<text
								style="font-size: 30upx; font-weight: bold;">{{customer.tableCount}}</text>桌</text>
						<text class="booking_content" v-else>请去个人资料填写预定桌数</text>
					</view>
				</uni-col>
				<uni-col :span="6">
					<view class="number"><uni-number-box :min="minValue" @change="addGoodsCard"></uni-number-box></view>
				</uni-col>
			</uni-row>
		</view>
		<!-- 页面导航-->
		<view class="flex-around" style="border-bottom: 1px solid #E6E6E8;">
			<view class="red-dot" v-show="isDot">优惠</view>
			<view v-for="(item, index) in topList" :key="index"
				:class="[item.default ? 'screen-item-avtive' : 'screen-item']" @click="changeTabs(item)">{{ item.name
					}}
				<uni-icons color="red" size="12" v-show="item.id==1">10</uni-icons>
			</view>

		</view>
		<!-- 商品详情 -->
		<view class="desc" v-show="isSHow" :style="{ height: urlHeight + 'upx' }">
			<view class="desc-title" v-for="(item,index) in descList">
				<text class="descName">{{item.descName}}:</text>&nbsp; &nbsp; <text
					class="description">{{item.description}}</text>
			</view>
			<view class="btn" v-show="buttonIsShow" @click="changeShowDescs"> 查看全部v</view>
		</view>

		<!-- 商品评价 -->
		<view class="evaln" v-show="isEvaln">
			评价
		</view>
		<!-- 搭配列表 -->
		<view class="dish" v-show="isDish">
			<uni-row class="demo-uni-row" v-for="(item,index) in dishList">
				<uni-col :span="12">
					<image class="dish-pic" :src="item.imgUrl" mode="heightFix"></image>
				</uni-col>
				<uni-col :span="12">
					<view style="width: 100%;height: 100%; padding-left: 20upx;">

						<view class="dish-name">{{item.dishName}}</view>
						<view class="dish-price" v-if="item.salePrice !=0">优惠价格：¥ &nbsp;
							<text class="salePrice">{{item.salePrice}}</text> <text
								class="price">¥{{item.dishPrice}}</text>
						</view>
						<view class="dish-price" v-else>优惠价格：
							<text style="color: #000; margin-left: 20upx;">赠品</text> <text
								class="price">¥{{item.dishPrice}}</text><strong></strong>
						</view>
						<view class="dish-score">
							<uni-row class="demo-uni-row">
								<uni-col :span="8">
									<text>服务评分：</text>
								</uni-col>
								<uni-col :span="12">
									<text><uni-rate :value="item.serviceScore" :readonly="true" /></text>
								</uni-col>
							</uni-row>
							<uni-row class="demo-uni-row">
								<uni-col :span="8">
									<text>口味评分：</text>
								</uni-col>
								<uni-col :span="12">
									<text><uni-rate :value="item.tasteScore" :readonly="true" /></text>
								</uni-col>
							</uni-row>
						</view>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<!-- 购物车导航 -->
		<view class="goods-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from "vuex"
	export default {
		data() {
			return {
				//菜品套餐数据
				dishSet: {},
				//商品导航栏配置
				options: [{
					icon: 'star',
					text: '收藏'
				}, {
					icon: 'cart',
					text: '购物车',
					info: 1
				}],
				buttonGroup: [{
					text: '加入购物车',
					backgroundColor: 'linear-gradient(90deg, #FF8A18, #EF1224)',
					color: '#fff'
				}],
				customer: {},
				isSHow: true,
				isEvaln: false,
				isDish: false,
				isDot: false,
				urlHeight: 150,
				// 状态
				status: '',
				//展示tab款的内容
				topList: [{
					name: '详情',
					default: true,
					// default: false,
					id: 0
				}, {
					name: '评价',
					default: false,
					// default: true,
					id: 1
				}, {
					name: '配菜',
					default: false,
					// default: true,
					id: 2
				}],
				params: {
					current: 1, // 第一页
					pageSize: 5, // 每页十个
					id: 0 // 当前状态
				},
				buttonIsShow: false,
				dishTotal: 0, //菜品总数
				dishList: [], //菜品列表
				descList: [], //套餐描述
				descTotal: 0,
				minValue: 1,
				quantity: 1,
				//客户购物车
				customerCart: {}
			}

		},
		onReachBottom() {
			if (this.params.current < this.dishTotal) {
				this.params.current++;
				// 模拟请求数据的过程
				setTimeout(() => {
					this.queryDishSet(this.params)
				}, 1000);
			}
		},

		methods: {
			...mapActions(['getCartGoodsList']),
			//点击收藏或购物时调用
			onClick(e) {
				uni.switchTab({
					url: "/pages/cart/cart"
				})
			},
			//点击加入购物车时调用
			buttonClick() {
				//验证当前用户是否登录
				if (uni.getStorageSync("token")) {

					//调用加入购物车接口
					console.log(this.customerCart)
					this.addCustomerCarts(this.customerCart)
				} else {
					this.$api.user.toLogin()
				}
			},
			//增加购物车的数量
			addGoodsCard(value) {
				this.options[1].info = value
				let price = this.customerCart.productPrice * value
				this.customerCart.price = price.toFixed(2);
				this.customerCart.quantity = value
			},
			//调用购物车接口
			async addCustomerCarts(params) {
				try {
					const {
						status,
						data,
						msg
					} = await this.$api.cart.addCustomerCarts(params)
					if (status == 200) {
						this.getCartGoodsList()
						uni.$u.toast("操作成功!")
					} else {
						uni.$u.toast("操作失败!")
					}

				} catch (e) {
					console.log(e)
				}
			},
			//点击tab跳转
			changeTabs(item) {
				let obj = this.topList.find(v => v.default)
				if (obj) {
					obj.default = false
					item.default = true
				}
				this.status = item.id
				this.isSHow = item.id == 0;
				this.isEvaln = item.id == 1;
				this.isDish = item.id == 2;
				if (item.id == 2) {
					this.isDot = true

				} else {
					this.isDot = false
				}
				// 	this.getRequestList()
			},
			//显示全部描述列表
			changeShowDescs() {
				this.descList = this.dishSet.descList
				this.urlHeight = this.descTotal * 50
				this.buttonIsShow = false
			},
			//查询菜品套列表
			async queryDishSet(params) {
				const {
					status,
					data,
					msg
				} = await this.$api.goods.queryDishSetAction(params)
				if (status == 200) {
					data.imgUrl = this.$store.state.url + data.imgUrl
					if (data.dishPage != null) {
						const page = data.dishPage
						for (let i = 0; i < page.records.length; i++) {
							page.records[i].imgUrl = this.$store.state.url + page.records[i].imgUrl
							this.dishTotal = page.total
							this.dishList.push(page.records[i])
						}
					}
					this.customerCart.customerId = this.$store.state.customer.id
					this.customerCart.categoriesId = data.id
					this.customerCart.productId = 0
					this.customerCart.quantity = this.options[1].info
					this.customerCart.productType = "SET_MENU"
					this.customerCart.productPrice = data.salePrice
					this.customerCart.price = this.options[1].info * data.salePrice
					this.dishSet = data;
					if (data.descList != null && data.descList.length > 2) {
						this.descList = []
						this.descTotal = this.dishSet.descList.length
						this.descList.push(data.descList[0])
						this.descList.push(data.descList[1])
						this.buttonIsShow = true

					} else {
						this.descList = data.descList
					}

				}

			}
		},
		onLoad(option) {
			this.params.id = option.id
			//加载菜品套餐数据
			this.queryDishSet(this.params)
			this.customer = this.$store.state.customer

		}
	}
</script>

<style lang="less" scoped>
	.datail-box {
		position: relative;
		min-height: 100vh;
		box-sizing: border-box;
		padding-bottom: 120rpx;

		/* 底部购物车高度 + 间距 */
		/* 底部购物车高度 + 间距 */
		.goods-pic {
			min-height: 100%;
			max-height: 100%;
			height: 100%;
		}

		.info {
			padding: 40upx;
			height: 100%;
			border-radius: 5%;
			margin-top: 5upx;
			background-color: white;

			.price {
				color: red;
				font-size: 25upx;
				line-height: 40upx;
				font-weight: bold;

				.totalPrice {
					text-decoration: line-through;
					margin-left: 10upx;
					color: #9b9b9b;
				}
			}

			.name {
				font: normal 30upx/8 0upx '微软雅黑';
				color: black;
				line-height: 40upx;
			}

			//销量样式
			.sales {
				font-size: 25upx;
				color: #9b9b9b;
			}

			//预定酒席盒子
			.booking_box {
				width: 100%;
				height: 30upx;
				padding-top: 10upx;
				line-height: 30upx;

				// background-color: red;
				//酒席预定标题样式
				.booking_titele {
					font-size: 25upx;
					color: #9b9b9b;
				}

				.booking_content {
					font-size: 25upx;
					color: red;
				}

			}

			//选择数量
			.number {
				width: 100%;
				height: 100%;
				line-height: 30upx;
			}

			.desc {
				width: 100%;
				/* 移除高度限制 */
				min-height: 210upx;
				overflow: visible;
				background-color: white;
				margin-bottom: 20rpx;

			}
		}
	}

	//导航样式 
	.flex-around {
		display: flex;
		/* 使用 Flexbox 布局 */
		flex-direction: row;
		/* 子元素横向排列 */
		justify-content: space-between;
		/* 子元素之间等距分布，可以根据需要调整 */
		align-items: center;
		background-color: white;
		margin-top: 10upx;

		// /* 点击文字的颜色 */
		.screen-item-avtive {
			position: relative;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: #656565;
			color: black;
			letter-spacing: 2rpx;
			padding: 24rpx 0;
			width: 30%;
			/* 例如，每个 item 占据容器宽度的 30% */
			text-align: center;
		}

		/* 文本居中，可选 */
		.red-dot {
			position: absolute;
			right: 0;
			margin-top: -70upx;
			width: 100upx;
			/* 小红点的宽度 */
			height: 40upx;
			/* 小红点的高度 */
			background-color: red;
			// /* 红色小红点 */
			border-radius: 50%;
			/* 小红点是圆形的 */
			font-size: 20upx;
			line-height: 40upx;
			text-align: center;
			color: white;
		}

		// /* 本来展示的颜色 */
		.screen-item {
			width: 30%;
			/* 例如，每个 item 占据容器宽度的 30% */
			text-align: center;
			/* 文本居中，可选 */
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			color: #9b9b9b;
			letter-spacing: 2rpx;
			padding: 24rpx 0;

			// /* 文本居中，可选 */
			// .red-dot {
			// 	position: absolute;
			// 	top: 0;
			// 	right: 0;
			// 	width: 100upx;
			// 	/* 小红点的宽度 */
			// 	height: 40upx;
			// 	/* 小红点的高度 */
			// 	background-color: red;
			// 	/* 红色小红点 */
			// 	border-radius: 50%;
			// 	/* 小红点是圆形的 */
			// 	font-size: 20upx;
			// }

		}

		// /* 点击的底部线条颜色 */
		.screen-item-avtive::after {
			content: '';
			position: absolute;
			left: 50%;
			bottom: 0;
			height: 4rpx;
			background-color: #FA541C;
			width: 50%;
			transform: translateX(-50%);
			border-radius: 4rpx;
			// transition: all .5s linear;
			animation: change 1s linear;
		}

		// /* 底部变化 */
		@keyframes change {
			0% {
				width: 50%;
			}

			50% {
				width: 100%;
			}

			100% {
				width: 50%;
			}
		}

	}

	//套餐简介
	.desc {
		// text-indent: 2em;
		// margin-top: 5upx;
		width: 100%;
		height: 100%;
		background-color: white;

		// padding-left: 10upx;
		// padding-right: 2upx;
		.desc-title {
			width: 90%;
			height: 30upx;
			padding: 10upx;
			text-align: left;
			line-height: 30upx;

			//详情-标题样式
			.descName {
				color: #9b9b9b;
				font-size: 24upx;
			}

			//详情-内容
			.description {
				font-size: 24upx;
				margin-left: 10upx;
				color: #797979;
			}
		}

		.btn {
			width: 100%;
			height: 40upx;
			margin: auto;
			font-size: 24upx;
			text-align: center;
			color: #9b9b9b;
			line-height: 40upx;


		}

	}

	//套餐评价信息
	.evaln {
		width: 100%;
		height: 100%;
		background-color: white;
		padding-left: 10upx;
		padding-right: 2upx;

	}

	//商品搭配列表样式
	.dish {
		width: 100%;
		min-height: 200upx;

		.demo-uni-row {
			background-color: white;
			margin-top: 10upx;

			.dish-pic {
				min-width: 100%;
				max-width: 100%;
				height: 210upx;
				border: 2px solid white;
				border-radius: 5%;
			}

			.dish-name {
				min-width: 100%;
				max-width: 100%;
				font-size: 30upx;
				color: red;
			}

			.dish-price {
				width: 100%;
				height: 100%;
				font-size: 25upx;

				.salePrice {
					color: red;
					margin-left: 14upx;
					font-size: 30upx;
				}

				.price {
					text-decoration: line-through;
					margin-left: 10upx;
					font-size: 26upx;
					color: #9b9b9b;
				}
			}

			.dish-score {
				font-size: 25upx;
			}
		}

	}


	.goods-carts {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		background: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
</style>